/*
  webpack.config.js 配置文件
    作用： 指示webpack怎么工作

  所有构件工具都是基于nodejs平台运行~模块化默认采用CommondJS
*/

const { resolve } = require('path')

module.exports = {
  // 配置
  entry: './src/index.js',
  output: {
    // 文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader 配置
  module: {
    rules: [
      // 详细 loader 配置
      // 不同文件必须配置不同的loader处理
      {
        // test 匹配哪些文件
        test: /\.css$/, // 以 .css 文件为扩展名
        // use 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序: 从右到左，从下到上，依次执行 ---
          // 创建style标签，将js中样式资源插入进行，添加head中生效
          'style-loader',
          // 将 css 文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/, // 以 .less 文件为扩展名
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成 css 文件
          // 需要2个包 less 和 less-loader
          'less-loader',
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细配置
  ],
  // 模式
  // mode: 'development', // 开发模式
  // mode: 'production', // 生成模式
}